<mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
    <ng-template tdLoading="features.load">
        <td-search-box class="push-left push-right" placeholder="search" [alwaysVisible]="true" (searchDebounce)="filterFeatures($event)"></td-search-box>
        <mat-divider></mat-divider>
        <mat-list class="will-load">
            <div class="md-padding" *ngIf="!filteredFeatures || filteredFeatures.length === 0" layout="row" layout-align="center center">
                <h3>No feature to display.</h3>
            </div>
            <ng-template let-item let-last="last" ngFor [ngForOf]="filteredFeatures">
                <mat-list-item>
                    <mat-slide-toggle matListIcon [(ngModel)]="item.enabled"></mat-slide-toggle>
                    <h3 matLine> {{item.title}} </h3>
                    <span flex></span>
                    <span flex-gt-xs="60" flex-xs="40" layout-gt-xs="row">
                        <div class="md-caption tc-grey-500" flex-gt-xs="50"> {{ item.user }} </div>
                        <div class="md-caption tc-grey-500" flex-gt-xs="50"> {{ item.modified | timeAgo }} </div>
                    </span>
                    <span>
                        <button mat-icon-button [mat-menu-trigger-for]="menu">
                        <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu x-position="before" #menu="matMenu">
                            <a [routerLink]="[item.id + '/edit']" mat-menu-item>Edit</a>
                            <button (click)="openConfirm(item.id)" mat-menu-item>Delete</button>
                        </mat-menu>
                    </span>
                </mat-list-item>
                <mat-divider *ngIf="!last"></mat-divider>
            </ng-template>
        </mat-list>
    </ng-template>
</mat-card>
<a mat-fab color="accent" class="mat-fab-bottom-right fixed" [routerLink]="['add']"> 
    <mat-icon>add</mat-icon>
</a>
